<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法 $("document").ready(function(){})
			//          简写：
			//总结：页面元素全部加载完毕，在执行jq相关文件
			//script元素放在最后一个body位置【可不写】
			$(function(){
				var se=$("#sicky").offset().top;
				$(window).scroll(function(){
					var st=$(window).scrollTop();
					if(st>se){
						$("#sicky").addClass("sticky");
					}else{
						$("#sicky").removeClass("sticky");
					}
				});
				//吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
				//思路：1.鼠标滚动，滚动到吸顶灯元素位置处，效果改变
				//     2.页面顶部到吸顶灯位置 200px 大于200px
				//     3.追加第一个样式：固定定位，页面顶部位置
				
				
				//      1.追加样式：吸顶灯卡在页面顶部
			    //      2.固定值：页面顶部到吸顶灯位置
				//      3.固定值>滚动值，滚动范围超过滚动值200px 实现切换
			});
		</script>
		<style>
			#top_context{
				height: 200px;
				color: red;
				line-height: 200px;
				text-align: center;
			}
			#sicky{
				height: 50px;
				background-color: red;
				text-align: center;
				line-height: 30px;
				color: #fff;
			}
			#main_context{
				height: 5000px;
			}
			
			
			
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="top_context">顶部内容区域</div>
		<div id="sicky">我是吸顶元素</div>
		<div id="main_context">太好了版本前瞻</div>
		<script>
			
		</script>
	</body>
</html>